<template>
	<view>
	
		<view class="list">
			<view class="listItem" v-for="(item,index) in list" :key="index" @click="onListItem(item)">
				<view class="top flex-between">
					<view class="orderNo">
						{{item.refundNo}}
					</view>
					<view class="orderStatus" v-if="item.status == 1">
						退款申请中
					</view>
					<view class="orderStatus" v-if="item.status == 2">
						退款驳回
					</view>
					<view class="orderStatus" v-if="item.status == 3">
						退款回填
					</view>
					<view class="orderStatus" v-if="item.status == 4">
						退款成功
					</view>
				</view>

				<view class="center">
					<view class="info flex" v-if="item.goods">
						<image class="thumb" :src="item.goods.thumbUrl"></image>
						<view class="infoR">
							<view class="infoRT">
								{{item.goods.title}}
							</view>
							<view class="infoRB flex-between">
								<view class="price">
									¥{{item.price}}
								</view>
								<view class="sku">
									x {{item.num}}
								</view>
							</view>
						</view>
					</view>

					<view class="subtotalBox flex">
						<view class="num">
							共{{item.num}}件
						</view>
						<view class="subtotal">
							小计：¥{{item.refundMoney}}
						</view>
					</view>
				</view>

			</view>
		</view>
		<u-loadmore :status="status" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
				lastId: 0,
				page: 1,
				list: [],
				end: false,
				status: 'loadmore',
			}
		},
		
		onShow() {
			this.reset()
			// this.getOrderList();
		},
		onReachBottom() {
			this.getOrderList()
		},
		methods: {
			
			onListItem(params) {
				let obj = JSON.stringify(params);
				uni.setStorageSync('afterDetailsData', obj);
				uni.navigateTo({
					url: '/afterSale/afterDetails'
				})
			},
		
			getOrderList() {
				if (this.end) {
					return
				}
				this.$post({
					url: '/portal/Shop',
					module: 'Order',
					interface: 4000,
					data: {
						lastId: this.lastId,
						page: this.page,
					}
				}).then(res => {
					this.list = [...this.list, ...res.list]
					// console.log(this.list)
					if (res.list.length < 10) {
						this.end = true
					}
					if (res.list.length < 10) {
						this.status = 'nomore';
					} else {
						this.status = 'loading';
					}
					this.page++
					this.lastId = res.lastId
				})
			},
		
			reset() {
				this.list = []
				this.lastId = 0
				this.page = 1,
					this.end = false
				this.status = 'loadmore'
				this.getOrderList()
			},
		},
	}
</script>

<style scoped lang="scss">
	

	.list {
		padding: 32rpx;

		.listItem {
			padding: 32rpx;
			margin-bottom: 32rpx;

			.top {
				.orderNo {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #afa9b0;
					line-height: 40rpx;
				}

				.orderStatus {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #afa9b0;
					line-height: 40rpx;
				}
			}

			.center {
				padding: 32rpx 0;
				border-top: 2rpx solid #EBEDF0;
				border-bottom: 2rpx solid #EBEDF0;
				margin-top: 40rpx;

				.info {
					margin-top: 20rpx;

					.thumb {
						width: 160rpx;
						height: 160rpx;
						border-radius: 16rpx;
					}

					.infoR {
						width: 438rpx;
						padding-left: 10rpx;
					}

					.infoRT {
						width: 100%;
						word-break: break-all;
						text-overflow: ellipsis;
						overflow: hidden;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						/* 这里是超出几行省略 */
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #000000;
						line-height: 44rpx;
					}

					.infoRB {
						margin-top: 20rpx;

						.price {
							font-size: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #000000;
							line-height: 48rpx;
						}

						.sku {
							font-size: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #afa9b0;
							line-height: 48rpx;
						}
					}
				}

				.subtotalBox {
					justify-content: flex-end;
					margin-top: 40rpx;

					.num {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #afa9b0;
						line-height: 40rpx;
					}

					.subtotal {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #000000;
						line-height: 40rpx;
						margin-left: 20rpx;
					}
				}
			}

		}
	}
</style>
